<template>
  <view class="wrap">
    <view class="top">
      <u-search placeholder="请输入关键字" v-model="searchKeywords" :clearabled="true" :focus="true" bg-color="#fff"
        :action-style="searchActionStyle" @search="searchCheck" @custom="searchCheck"></u-search>
    </view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
    <view class="card" v-for="(item, index) in list" :key="item.id">
        <u-swipe-action :show="item.show" :index="index"  @click="click"
          @open="open" :options="options">
          <view class="item" @click="todetail(item)">
            <view class="client">
              {{item.channel}}
            </view>
            <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
            <view class="detail">
              <view class="shopname">
                {{item.name}}
              </view>
              <view class="bottom">
                <text class="time">{{item.mod_date|moteDate}}</text>
                <text class="total">数量:{{item.quantity}}</text>
                <text class="price">单价:{{item.price }}</text>
                <text class="totalprice">总计￥{{item.price*item.quantity}}</text>
              </view>
            </view>
          </view>
        </u-swipe-action>
        <u-divider style="margin-top: 30px" v-if="hasNext">上拉加载更多</u-divider>
    </view>
      </mescroll-body>
  </view>
</template>

<script>
  // import {} from '@/'
  import {
    getPurchaseList,
    delPurchase,
    getPurchaseForTable,
    purchaseSearchByJdCode,
    purchasePayBatch
  } from '@/utils/purchase.js'
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import {
    tablePageSize,
    tableCurrent,
    swipeOptions
  } from "@/common/initData/config";
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        list: [],
        show:false,
        options: [{
            text: '详情',
            style: {
              backgroundColor: '#007aff'
            }
          },
          {
            text: '删除',
            style: {
              backgroundColor: '#dd524d'
            }
          }
        ]
      };
    },
    filters: {
      moteDate(value) {
        return value.substring(0, 10)
      },
      priceFixed(value) {
        return value.toFixed(2)
      }
    },
    onLoad() {
      this.getPurchaseData()
    },
    methods: {
      // 跳转详情页
      todetail(item){
        uni.navigateTo({
          url:'/allList/purchaseManage/purchaseManage?item=' + encodeURIComponent(JSON.stringify(item))
        })
      },
      /*上拉加载的回调*/
      upCallback(page) {
        this.pageSize = page.size
        this.currentPage = page.num
        this.getPurchaseData()
      },
      open(index) {
        // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
        // 原本为'false'，再次设置为'false'会无效
        this.list[index].show = true;
        this.list.map((val, idx) => {
          if (index != idx) this.list[idx].show = false;
        })
      },
      click(index, index1) {
        console.log(index);
        if (index1 == 1) {
          this.list.splice(index, 1);
          this.$u.toast(`删除成功`);
        } else {
          this.list[index].show = false
          uni.navigateTo({
            url: '/allList/detail/detail'
          })
        }
      },
      //获取采购数据
      getPurchaseData() {
        // this.loading = true
        getPurchaseList({
          params: JSON.stringify({
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            channel_id: null,
            keywords: '',
            beginDate: '',
            endDate: '',
            whom: '',
            isWX: 1
          })
        }).then(res => {
          // console.log(res);
          console.log(res.data)
          res = res.data
          if (this.currentPage == 1) this.list = []
          if (res.rows.length < this.pageSize) {
            this.hasNext = false
          } else {
            this.hasNext = true
          }
          this.mescroll.endSuccess(res.rows.length, this.hasNext)
          this.list = this.list.concat(res.rows).map((item) => {
            return {
              ...item,
              show: false
            }
          })
          // this.batchDisbaled = true;
          // this.loading = false;
          // res = res.data;
          // if (!this.isMobile) {
          //   this.purchaseData = res.rows;
          //   this.total = res.total;
          // } else {
          //   if (this.currentPage == 1) this.purchaseData = [];
          //   if (res.rows.length < this.pageSize) {
          //     this.hasNext = false
          //   } else {
          //     this.hasNext = true
          //   }
          //   // console.log(hasNext)
          //   this.mescroll.endSuccess(res.rows.length, this.hasNext);
          //   this.purchaseData = this.purchaseData.concat(res.rows);
          // }
        }).catch(e => {
          console.log(e, '获取采购数据失败')
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .wrap {
    padding: 20rpx;
    background: #f0f0f0;

    .card {
      // height: 200rpx;
      width: 100%;
      border-radius: 16rpx;
      background-color: #fff;
      margin-top: 20rpx;

      /deep/.u-swipe-action {
        border-radius: 16rpx;
        margin-top: 20rpx;
        // padding:20rpx;
        .item{
          width: 100%;
          height: 100%;
          padding: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        .client{
        font-size: 16px;
        
        }
        .shopname{
          font-size: 12px;
          margin: 10rpx 0;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .bottom{
          display: flex;
          justify-content: space-between;
        }
        }
      }
    }
  }

  /deep/ .u-search {
    .u-content {
      border-radius: 30rpx 0 0 30rpx !important;
    }

    .u-action {
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 0 30rpx 30rpx 0;
      background-color: #fd2f3d;
      margin-left: 0;
      width: 100rpx;
      color: #fff;
    }
  }
</style>
